<template>
  <div class="heduidingdan">
    <h1>核对订单信息</h1>
    <!-- 添加地址 -->
    <div class="dizhi">
      <p>收货人信息</p>

      <!-- 添加地址按钮:地址输入 -->
      <div class="dizhishuru" @click="address">
        <p><i class="el-icon-circle-plus"></i> 添加新地址</p>
      </div>

      <!-- 渲染已输入地址信息 -->
      <div class=" dizhishuruB " v-for="(item,index) of this.dizhi" :key="item.id" @click="xuanzhongdizhi(index)"
        :class="{dianji:isActive==index}">
        <div class="dizhilan">
          <p>{{item.name}}<span>{{item.phone}}</span></p>
          <p class="dizhilanwenzi">{{item.area_name}}{{item.desc}}</p>
          <button @click="editDZ(item)">编辑地址</button>
          <button @click="delDZ(item.id)">删除</button>
        </div>
      </div>
    </div>

    <!-- 点击添加按钮后的弹窗输入 -->
    <el-dialog title="" :visible.sync="dialogVisible" width="80%" @close="close">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名:">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码:">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="收货地区:">
          <!-- <el-input v-model="form.name"></el-input> -->
          <div class="block">
            <span class="demonstration"></span>
            <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="FFupaddress">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 确认商品栏 -->
    <div class="querenSP">
      <p>确认商品</p>
      <div class="title">
        <p>商品名称</p>
        <p>价格(元)</p>
        <p>数量</p>
        <p>小计(元)</p>
      </div>
      <ul class="shangpin">
        <li class="centerA" v-for="(item,index) of aa" :key="item.s_good.id">
          <div class="pic">
            <img :src="item.s_good.s_goods_photos[0].path" alt="">
          </div>
          <div class="name">{{item.s_good.name}}</div>
          <div class="price">
            ￥<span>{{item.s_good.price}}.00</span>
          </div>
          <div class="number" >
            {{item.num}}
          </div>
          <div class="subtotal">
            <span>{{item.s_good.price * item.num}}.00</span>
          </div>
          <div class="del">
          </div>

        </li>

      </ul>

    </div>

    <!-- 金额总计，提交订单按钮 -->
    <div class="tijiao">
      <div class="wenzi">
        <p>应付总额：<span>￥{{Math.round(goodsPic)}}.00</span></p>
        <p>收件人：{{beixuanzhong.name}}&nbsp; &nbsp; {{beixuanzhong.phone}}</p>
        <p class="dizhiqueren">配送地址：{{beixuanzhong.area_name}}{{beixuanzhong.desc}}</p>
        <button @click="gooo">提交订单</button>
      </div>

    </div>
  
  </div>
</template>

<script>
//引入所有城市请求函数,添加地址,请求地址,删除地址,修改地址,提交订单
import { getCity, address, getaddress, deladdress, editAddress,addOrder } from "@/assets/request.js"

export default {
  name: 'order',
  data() {
    return {
      isActive: 0,
      //准备一个空数组接收提取本地存储的数据,渲染页面
      aa: [],

      //弹窗组件默认值
      dialogVisible: false,

      //准备一个参数来判断地址弹窗的确认按钮走哪一步执行过程
      useraction: null,

      //弹窗里面的表格
      form: {
        name: "",
        phone: "",
        area: "",
        area_name: "",
        desc: "",

      },

      //Cascader 级联选择器默认有的,选中后收集到这里
      value: '',

      //Cascader 级联选择器--准备一个空数组接收请求所有城市的数组
      options: [],

      // //准备一个空对象接收填写过的地址信息
      // addressA: {},

      //准备一个空数组接收请求回来的地址列表---渲染已输入的地址到指定div
      dizhi: [],

      //准备一个空数组接收---由城市代码转成中文的数组
      cityname: '',

      //准备一个空数组 接收被选中的地址列表信息
      beixuanzhong: {},

      //准备一个参数接受地址事件行为的id传参，再到方法里面使用
      ID: 0,

      //当前页面的商品信息数组goods_id和num
      goods_info:[],

      //当前页面的商品id数组
      shoppingCartIds:[],

    }
  },

  //方法
  methods: {

    //路由跳转
   async gooo() {
    
      //获取当前aa数组里的goods_id和num，并赋值给变量
      this.aa.forEach((item)=>{

        //把遍历出来的商品id用数组添加的方法添加到准备好的空数组
        this.shoppingCartIds.push(item.goods_id)

        //把遍历出来的商品id和商品数量 以每一个item对应每一个对象的方式 添加到准备好的空数组里面
        this.goods_info.push({
          id:item.goods_id,
          num:item.num

        })

      })

      //遍历完，打印一下看是否拿到对应数据
      // console.log(this.shoppingCartIds);
      // console.log(this.goods_info);

      //调用添加订单的请求函数
    let bb =  await addOrder({
        //传入地址id
        addr_id:this.beixuanzhong.id,
        //传入商品信息数组
        goods_info:this.goods_info,
        //项目id
        project_id:267,
        //商品id数组
        shoppingCartIds:this.shoppingCartIds,

      })

      console.log(bb);

      //跳转到订单列表
      this.$router.push('/order/orderlist')
  },


    //封装获取地址列表的函数
    async getaddress() {
      let dizhi1 = await getaddress()
      this.dizhi = dizhi1.data.result
      console.log(this.dizhi);

    },

    //添加地址点击-----组件弹窗,参数赋值
    address() {
      this.dialogVisible = true;
      this.useraction = 0
    },


    //组件选择城市传入选择值--value是一个数组
    handleChange(value) {
      //把省转成中文--a是一个对象，拿它的cityname属性
      let a = this.options.find((item) => {
        return item.value == this.value[0]
      })

      //把市转成中文--b是一个对象，拿它的cityname属性
      let b = a.children.find((item) => {
        return item.value == this.value[1]
      })

      //把区转成中文
      let c = b.children.find((item) => {
        return item.value == this.value[2]
      })

      this.cityname = a.cityname + b.cityname + c.cityname
      console.log(this.cityname);  //得到转成中文的城市字符串

      //把中文城市字符串赋值给form的属性，然后把当前页面的cityname数组清空
      this.form.area_name = this.cityname
      this.cityname = []

      //把城市数字数组赋值给form属性，value是一个数字数组(地区代码)，需要转换成字符串，并且进行逗号分隔
      this.form.area = value.join(",")

    },

    //弹窗的确认按钮行为---如果参数值为0 就是添加地址，参数值为1就是修改地址
    async FFupaddress() {

      if (this.useraction === 0) {

        //把页面输入的地址信息传给添加地址的请求函数，并赋值给变量查看是否成功
        let add = await address(this.form)
        console.log(add);

        //重新请求地址列表
        this.getaddress()

        //关闭弹窗
        this.dialogVisible = false

      } else if (this.useraction === 1) {

        //把输入的地址信息传给修改地址的请求函数
        let edit = await editAddress(this.ID, this.form)
        console.log(edit);

        //重新请求地址列表
        this.getaddress()

        //关闭弹窗
        this.dialogVisible = false

      }

    },

    //清除弹窗行为
    close() {
      this.dialogVisible = false
    },

    //删除单个地址信息按钮行为
    async delDZ(id) {

      //给请求函数传入地址id
      await deladdress(id)

      //组件弹窗提醒
      this.$message({
        message: "该地址已删除！",
        type: "warning",
        duration: 800,
      })

      //再次获取地址列表信息
      this.getaddress()
    },

    //选中地址栏对应加上样式
    xuanzhongdizhi(index) {
      this.isActive = index
      this.beixuanzhong = this.dizhi[index]
       console.log(this.beixuanzhong);
    },

    //点击修改地址按钮后---给一些参数赋值，然后到弹窗里面执行对应方法
    editDZ(item) {
      //弹窗出现
      this.dialogVisible = true,
      //判断条件赋值
        this.useraction = 1
        //把接收到的item.id赋值给data里的ID
      this.ID = item.id
      // console.log(this.ID); 打印查看一下是否收到id
    },


  },

  computed: {
    //右下角总价格
    goodsPic() {
      return this.aa.reduce((prev, item) => {
        return prev += item.num * item.s_good.price
      }, 0)
    }
  },

  //生命钩子
  async mounted() {

    //拿取--本地存储的数据
    let orderList1 = sessionStorage.getItem("orderList")
    //读复杂的数据类型 要使用JSON.parse方法还原，并且赋值给当前页面的空数组
    this.aa = JSON.parse(orderList1)
    // console.log(this.aa);

    //请求--所有城市信息
    let citys = await getCity()
    this.options = citys.data.result
    // console.log(this.options)

    //请求--地址列表信息
    this.getaddress()

  }

}

</script>

<style lang='scss' scoped>

.heduidingdan{
  background-color: gainsboro;


h1,
.dizhi,
.querenSP,
.tijiao {
  width: 1400px;
  height: 50px;
  background-color: gainsboro;
  text-align: center;
  line-height: 50px;
  margin-left: 57px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.dizhi {
  height: 280px;
  display: flex;
  flex-wrap: wrap;

  p {
    width: 100%;
    font-size: 20px;
    text-align: left;
    margin-left: 20px;
  }

  .dizhishuru,
  .dizhishuruB {
    width: 340px;
    height: 220px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-items: center;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;


    p {
      width: 300px;
      height: 50px;
      // background-color: pink;
      margin-left: 90px;

      i {
        font-size: 30px;
      }

    }

  }

  .dianji {
    background-color: #333333;
    color: white;
    z-index: 100;

    button{
      color: white;
      border: 1px solid white;
    }
  }

  .dizhilan {

    // background-color: pink;

    p {
      width: 300px;
      height: 60px;
      font-size: 16px;
      text-align: left;
      margin-left: 20px;

      &:first-of-type {
        display: flex;
        justify-content: space-between;
        padding-right: 20px;
      }
    }

    .dizhilanwenzi {
      display: -webkit-box;
      display: -moz-box;
      overflow: hidden;
      // 溢出的文字显示为...
      text-overflow: ellipsis;
      //控制行数
      -webkit-line-clamp: 1;
      //多行溢出处理
      -webkit-box-orient: vertical;

    }

    button {
      width: 70px;
      height: 30px;
      background-color: transparent;
      border-radius: 10px;
      border: 1px solid gray;
      cursor: pointer;
      margin: 10px;

      &:hover {
        background-color: orange;
        transition: all 0.6s;
        border: 1px solid white;
      }


    }
  }
}

.querenSP {
  height: 700px;

  p {

    font-size: 20px;
    text-align: left;
    text-indent: 25px;
    border-bottom: 3px solid white;
  }

  .title {
    width: 1300px;
    display: flex;
    justify-content: center;

    P {

      width: 200px;
      height: 50px;
      // border: 1px solid black;
      font-size: 20px;
      text-align: center;
      text-indent: 0px;
      border-bottom: none;
      line-height: 50px;

      &:nth-of-type(1){
        width: 350px;
      }

    }
  }

  .shangpin {

    width: 1300px;

    .centerA {
      width: 1300px;
      height: 160px;
      background-color: gainsboro;
      display: flex;
      justify-content: center;
      line-height: 150px;
      margin-bottom: 20px;
      margin-top: 20px;

      .pic{
        width: 150px;
        height: 150px;
        
        img{
          width: 100%;
        }
      }

      .name{
        width: 200px;
        // height: 200px;
        font-size: 17px;
        line-height: 40px;
        margin-top: 40px;
        display: -webkit-box;
      display: -moz-box;
      overflow: hidden;
      // 溢出的文字显示为...
      text-overflow: ellipsis;
      //控制行数
      -webkit-line-clamp: 2;
      //多行溢出处理
      -webkit-box-orient: vertical;
      }

      .price{
        width: 200px;
        font-size: 20px;
        color: red;
      }

      .number{
        width: 200px;
        font-size: 20px;

      }

      .subtotal{
        width: 200px;
        font-size: 20px;
        color: red;
      }
    
    }

  }

}

.tijiao {
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  margin-bottom: 0px;

  .wenzi {
    width: 300px;


    p {
      margin-bottom: 10px;
      // border: 1px solid black;
      text-align: left;
      font-size: 16px;
      color: grey;

      span {
        font-size: 30px;
        color: red;
      }
    }

    .dizhiqueren {
      display: -webkit-box;
      display: -moz-box;
      overflow: hidden;
      // 溢出的文字显示为...
      text-overflow: ellipsis;
      //控制行数
      -webkit-line-clamp: 2;
      //多行溢出处理
      -webkit-box-orient: vertical;
    }



    button {
      width: 150px;
      height: 60px;
      background-color: #333333;
      border: none;
      border-radius: 0px;
      color: white;
      margin-left: 50px;
      font-size: 20px;
      cursor: pointer;

      &:hover{
        background-color: orange;
        transition:all 0.5s;
      }
    }

  }

}
}
</style>